<script>
export default {
  name: "anLier",
  data(){
    return{
      style1: {
        "font-size": "30px",
        fontSize: "30px"
      },
      style2: {
        color: 'red'
      }
    }

  },
  methods:{
    getColor(n) {
      if (n === 1) {
        return { color: "red" }

      } else if (n === 2) {
        return { color: "green" }
      }
    }
  }

}
</script>

<template>
<div id="app">
  <div style="font-size: 30px;">size</div>
  <div :style="{'font-size': '30px'}">size</div>
  <!-- 1、对象 -->
  <div :style="style1">style1</div>
  <!-- 2、数组 -->
  <div :style="[style1,style2]">style1</div>
  <!-- 3、函数返回值 -->
  <div :style="getColor(1)">getColor</div>
  <div :style="getColor(2)">getColor</div>
</div>
</template>

<style scoped lang="less">

</style>